<!DOCTYPE html>
<html>
<head>
<title>详情</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/getParameter.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script>
	var cid;
	var fid;
	$(function() {
		cid = getParameter('cityid');
		fid = getParameter('foodid');
		//查询用户信息
		$("#u_inf").hide();
		$("#logout").hide();
		$("#no_reg").hide();
		$.get("./fillServlet", {}, function(data) {
			//{uid:1,name:'李四'}
			if (data != null && data.length != 0) {
				$("#reg").hide();
				$("#u_inf").show();
				$("#logout").show();
				$("#u_inf").text("欢迎," + data.username);
				img = $("#img1").attr("src");
				uid = data.uid;
				$.get("./isfavoriteServlet",{foodid:fid,img:img,uid:uid},function(favor){
					 if(favor){
						//用户收藏过，按钮置灰
						$("#collect").css({"background" : "gray"});
						$("#collect").attr("disabled","disabled");
						$("#collect").prop("href","#");
						$("#collect").html('<span class="glyphicon glyphicon-heart"></span>&#160&#160已收藏');
					  }
				  });
			} else {
				$("#reg").show();
			}
		});
		
		
		$.get("./detialServlet",{foodid:fid},function(data){
			$("#img1").attr("src",""+data[0].img1+"");
			$("#img2").attr("src",""+data[0].img2+"");
			$("#img3").attr("src",""+data[0].img3+"");
			$("#dis h1").text(""+data[0].dname+"");
			$("#dis span:first").html("&#160&#160&#160&#160&#160&#160"+data[0].detial+"");
			$("#buy").prop("href",""+data[0].buyurl+"");
			$("#pp1").html("&#160&#160&#160&#160&#160&#160"+data[0].hirstory+"");
			$("#pp2").html("&#160&#160&#160&#160&#160&#160"+data[0].charactor+"");
			$("#pp3").html(""+data[0].domake+"");
			$("#foodlist").prop("href","./list.html?cityid="+cid);
		});
		
	});
	
	function favorite() {
		var uid;
		var fid = getParameter('foodid');
		$.get("./fillServlet", {}, function(data) {
			if (data == null || data.length == 0)
				{
				$("#no_reg").show();
				$("#main").hide();
				}
			else
				{
				  img = $("#img1").attr("src");
				  uid = data.uid;
				  $.get("./favoriteServlet",{foodid:fid,img:img,uid:uid},function(favor){
					  if(favor){
						//用户收藏成功
						$("#collect").css({"background" : "gray"});
						$("#collect").attr("disabled","disabled");
						$("#collect").removeAttr("onclick");
						$("#collect").html('<span class="glyphicon glyphicon-heart"></span>&#160&#160已收藏');
					  }
				  });
				}
		});
	}
</script>

<style type="text/css">
#first {
	border: gray 2px solid;
	background: url("./img/header_bg.jpg") no-repeat;
	background-size: 100%;
	height: 120px;
	border-radius: 10px;
}

#p1 {
	color: #D3D3D3;
	font-style: oblique;
	font-size: 40px;
	font-family: "华文琥珀";
	margin-top: 28px;
	margin-left: 40px;
	float: left;
}

#p2 {
	color: black;
	font-size: 25px;
	font-family: "仿宋";
	padding-top: 45px;
	margin-left: 480px;
}

#word {
	width: 80px;
	height: 80px;
}

#xx {
	width: 75px;
	height: 105px;
}

.footer {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 20px;
}

#fir_row {
	background: #F8F8F0;
	border-radius: 10px;
}

#banner {
	margin: 20px 0 20px 20px;
	width: 800px;
}

#banner div {
	border-radius: 10px;
}

#dis {
	margin: 20px 0 0 -10px;
}

#collect {
	width: 150px;
	height: 44px;
	font-size: 20px;
	background: #EE6363;
	margin: 30px 0 0 35px;
}

#img1{
	width: 800px;
	height: 485px;
}

#img2{
	width: 800px;
	height: 485px;
}

#img3{
	width: 800px;
	height: 485px;
}

#buy {
	width: 150px;
	height: 44px;
	font-size: 20px;
	background: #F4A460;
	margin: 30px 0 0 35px;
}

#sec_row {
	margin-top: 20px;
	background: #F8F8F0;
	border-radius: 10px;
}

#title {
	display: inline-block;
	font-size: 20px;
	margin: 30px 0 0 30px;
}

#hr2 {
	margin-top: 60px;
	width: 1080px;
	border: 1px black solid;
}

#sec_row p {
	margin: 10px 50px 20px 50px;
	line-height:165%;
}

h3 {
	margin-left: 400px;
}
</style>

</head>
<body>

	<div class="container-fluid">
		<div class="row" id="first"></div>
		<div class="row">
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed"
							data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span> <span
								class="icon-bar"></span> <span class="icon-bar"></span> <span
								class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="./index.html">首页</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse"
						id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="./collection.html">我的收藏 <span
									class="sr-only">(current)</span></a></li>
						</ul>
						<form class="navbar-form navbar-right" role="search" action="./searchlist.html">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="关键词搜索"  name="keyword">
								<input name="currentpage" value=0 style="display: none;">
							</div>
							<input type="submit" id="sss" value="搜索"  class="btn btn-default ">
						</form>
						<ul class="nav navbar-nav navbar-right">
							<li><a href="./register.html">注册</a></li>
							<li><a id=u_inf></a></li>
							<li id=reg><a href="./Login.jsp">登录</a></li>
							<li id=logout><a
								href="javascript:location.href='userLogoutServlet';">退出登录</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</div>
    
    <div class="container" id="no_reg">
		<h3>
			对不起，您还未登录，请返回<a href="./Login.jsp">登录</a>
		</h3>
	</div>
    
	<div class="container" id="main">
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="./first.html">首页</a></li>
				<li><a href="" id="foodlist">美食列表</a></li>
				<li>美食详细</li>
			</ol>
		</div>
   
		<div class="row" id="fir_row">
			<div class="col-sm-9">
				<section id="banner">
					<div id="carousel-example-generic" class="carousel slide"
						data-ride="carousel" data-interval="2000">
						<!-- Indicators -->
						<ol class="carousel-indicators">
							<li data-target="#carousel-example-generic" data-slide-to="0"
								class="active"></li>
							<li data-target="#carousel-example-generic" data-slide-to="1"></li>
							<li data-target="#carousel-example-generic" data-slide-to="2"></li>
						</ol>
						<div class="carousel-inner" role="listbox">
							<div class="item active">
								<img id="img1" src="">
							</div>
							<div class="item">
								<img  id="img2" src="">
							</div>
							<div class="item">
								<img id="img3" src="">
							</div>
						</div>
						<!-- Controls -->
					</div>
				</section>
			</div>
			<div class="col-sm-3" id="dis">
				<h1></h1>
				<br> <span></span> <br> 
				<a class="btn btn-default"href="javascript:favorite();" role="button" id="collect"><span
					class="glyphicon glyphicon-heart"></span>&#160&#160收藏</a> <br> 
				<a class="btn btn-default" role="button" id="buy" href="#"><span
					class="glyphicon glyphicon-shopping-cart"></span>&#160&#160去购买</a>
			</div>
		</div>
		
		<div class="row" id="sec_row">
			<div class="col-sm-2">
				<span id="title"><span class="glyphicon glyphicon-tags"></span>&#160&#160历史</span>
			</div>
			<hr id="hr2">
			<p id="pp1"></p>
		</div>

		<div class="row" id="sec_row">
			<div class="col-sm-2">
				<span id="title"><span class="glyphicon glyphicon-tags"></span>&#160&#160特点</span>
			</div>
			<hr id="hr2">
			<p id="pp2"></p>
		</div>
		
		<div class="row" id="sec_row">
			<div class="col-sm-2">
				<span id="title"><span class="glyphicon glyphicon-tags"></span>&#160&#160制作方法</span>
			</div>
			<hr id="hr2">
			<p id="pp3"></p>
		</div>
	</div>



	<div class="footer">
		<hr>
		Copyright © 2020, <a href="./index.html">&#160&#160嗣食肆&#160</a>&#160All
		Rights Reserved
	</div>
</body>
</html>